import React, { Component, Fragment } from "react";
import './style.css'
import List from './components/list'
import axios from 'axios'

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputVal: '',
            list: ['吃饭', '逛街'],
            movieList: []
        }
    }
    inputChange(e) {
        // console.log(e.target.value);
        // this.state.inputVal = e.target.value
        this.setState({
            inputVal: this.input.value
        })
    }
    addList() {
        this.setState({  // setState 类似于 vue3的 reactive 将数据变成响应式的
            list: [...this.state.list, this.state.inputVal]
        })
    }
    deleteItem(index) {
        let list = this.state.list //list数组
        list.splice(index, 1)
        this.setState({
            list: list
        })
        console.log(index);
    }

    componentWillMount() {
        console.log('组件将要挂载');
        axios.get('https://www.fastmock.site/mock/39ac87de3060aa2bb2ba20a0ff375c81/cat-movie/hot')
        .then((res) => console.log(res))
        
    }

    componentDidMount() {
        console.log('组件已经挂载');
    }

    shouldComponentUpdate() {
        console.log('组件更新之前');
        return  true
    }

   componentWillUpdate() {
       console.log('组件将要更新');
   }

   componentDidUpdate() {
       console.log('组件更新完成');
   }

    render() {
        console.log('render--组件挂载中');
        return (
            <Fragment>

                {/* 注释 */}
                {
                    // 注释
                }
                <div>
                    <label htmlFor="yuehui">项目：</label>
                    <input id="yuehui" 
                    className="input" 
                    value={this.state.inputVal} 
                    onChange={this.inputChange.bind(this)}
                    ref={(input) => this.input = input}
                    ></input>
                    <button onClick={this.addList.bind(this)}>添加</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <List
                                    content={item}
                                    key={index}
                                    index={index}
                                    deleteItem={this.deleteItem.bind(this)}
                                    list={this.state.list}
                                />
                                // <li
                                //     key={index}
                                //     onClick={this.deleteItem.bind(this, index)}
                                //     dangerouslySetInnerHTML={{__html: item}}
                                // >
                                //     {/* {item} */}
                                // </li>
                            )
                        })
                    }
                </ul>
            </Fragment>

        )
    }
}

export default App